<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import wechatIcon from '@/assets/img/wechat.png'
import alipayIcon from '@/assets/img/alipay.png'

const router = useRouter()
const selectedPayment = ref('wechat') // 默认选择微信

// 支付处理
const handlePayment = () => {
  // 模拟支付处理
  setTimeout(() => {
    alert('支付成功！')
    router.push({ name: 'orders' })
  }, 1000)
}
</script>

<template>
  <!-- 顶部导航栏 -->
  <div class="bg-primary text-white py-4 text-center font-bold text-lg sticky top-0 z-10">
    支付订单
  </div>

  
    
  <!-- 主要内容容器 -->
  <div class="max-w-screen-md mx-auto">
    <!-- 订单金额 -->
    <div class="mt-4 bg-white p-5 rounded-lg">
      <div class="text-center text-gray-500">订单金额</div>
      <div class="text-center mt-2 text-3xl font-bold">¥54.00</div>
    </div>
      
    <!-- 支付方式 -->
    <div class="mt-4 bg-white p-4 rounded-lg">
      <div class="text-gray-500 mb-3">选择支付方式</div>
      <div class="space-y-3">
        <div 
          v-for="method in [
            { id: 'wechat', name: '微信支付', icon: wechatIcon },              { id: 'alipay', name: '支付宝', icon: alipayIcon }
          ]" 
          :key="method.id"
          class="flex items-center p-3 rounded-lg border-2"
          :class="selectedPayment === method.id ? 'border-primary' : 'border-gray-200'"
          @click="selectedPayment = method.id"
        >
          <img :src="method.icon" class="w-8 h-8 mr-3" />
          <span class="text-lg">{{ method.name }}</span>
          <div class="ml-auto">
            <div 
              class="w-5 h-5 rounded-full border-2 flex-center"
              :class="selectedPayment === method.id ? 'bg-primary border-primary' : 'border-gray-300'"
            >
              <div 
                v-if="selectedPayment === method.id"
                class="i-material-symbols:check text-white text-sm"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
    
  <!-- 支付按钮 -->
  <div class="bg-white border-t border-gray-100 py-3 px-4 mb-6 rounded-lg mt-120 flex-center">
      <button 
        @click="handlePayment"
        class="w-full bg-primary text-white py-3 rounded-full font-bold hover:bg-opacity-90 transition-colors"
      >
        确认支付 ¥54.00
      </button>
   </div>
</template>